<template>
  <q-page v-if="isJump == 1" style="background-color: #f8f8f8" class="column q-pa-lg">
    <div class="flex">
      <q-icon name="policy" size="21px" style="color: #08ae56; margin-right: 10px;" />
      <span style="color: #767676;">本链接已经过SSL安全加密，请放心点击</span>
    </div>
    <div class="flex justify-center" style="margin-top: 150px;">
      <img src="~/assets/images/wechat.png" alt="" srcset="">
    </div>
    <div class="flex justify-center" style="margin-top: 40px; font-size: 14px; color: #aaa;">正在跳转到微信...</div>
    <div class="flex justify-center" style="margin-top: 12px; font-size: 16px; color: #767676;">如未自动打开微信请点击下方按钮</div>
    <div class="flex justify-center" style="margin-top: 76px;">
      <q-btn @click="gotoWx" style="background: #09c160; color: white" unelevated size="md" rounded label="点击立即前往微信"/>
    </div>
    <div class="flex justify-center" style="margin-top: auto; font-size: 14px; color: #767676;">
      如无法打开微信，请复制链接到浏览器打开
    </div>
  </q-page>
  <q-page v-else-if="isJump == 2" style="background-color: #f8f8f8" class="q-pa-lg q-pt-xl">
    <div style="background-color: #fff; border-radius: 8px; max-width: 500px; margin: auto" class="q-pa-md">
      <div class="flex items-class">
        <div class="logo q-mr-md" :style="{ backgroundImage: `url(${data?.gzhLogo})` }"></div>
        <div class="column justify-center">
          <div>
            {{ data?.gzhName || '' }}
          </div>
          <div style="color: #9ca3af">长按三秒识别二维码!</div>
        </div>
      </div>
      <img @touchstart="touchstartHandler" @touchend="touchendHandler" @contextmenu="contextmenuHandler"
        :src="data?.gzhQrCode" alt="gzhQrCode" style="width: 100%" />

      <div class="content-article-footer">长按识别上方二维码图案</div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { gzhPageJumpInfoApi, wxEventCountApi, miniPageJumpInfo } from 'src/api/app';
import { useAppStore } from 'src/stores/app-store';
import { isWeChat } from "src/utils/lib";
import { ref } from 'vue';
type GzhRes = {
  gzhQrCode: string;
  gzhLogo: string;
  gzhName: string;
  openlink: string;
};
const data = ref<GzhRes>();
const isJump = ref(0)
let execTime = 0
const contextmenuHandler = () => {
  const currTime = new Date().getTime()
  if ((currTime - execTime) < 3000) return;
  execTime = currTime;
  wxEventCountApi({
    userUuid: useAppStore().deviceId,
    type: 3,
  });
};

let timeout: number;
const touchstartHandler = () => {
  timeout = window.setTimeout(() => {
    contextmenuHandler()
  }, 300);
};
const touchendHandler = () => {
  clearTimeout(timeout);
};
const gotoWx = () => {
  if (data.value?.openlink) {
    location.href = data.value.openlink
  }
}
const initData = async () => {
  const res = await miniPageJumpInfo<GzhRes>();
  if (isWeChat()) {
    isJump.value = 2
  }else{
    isJump.value = 1
    if (res.data.openlink) {
      location.href = res.data.openlink
    }
  }
  data.value = res.data;
  wxEventCountApi({
    userUuid: useAppStore().deviceId,
    type: 2,
  });
};

initData();
</script>

<style lang="scss" scoped>
.logo {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 6px;
}

.content-article-footer {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  height: 20px;
  line-height: 20px;
  color: #2f495e;
}
</style>
